Popup = function(config){
	this.init(config);
};

PopupContants = {
	width : 400,
	height : 200
};

Popup.prototype = {
	div : null,
	headDiv : null,
	titleDiv : null,
	contentDive : null,
	config : null,
	
	init : function(config){
		this.config = config;
		with(this){
			initDiv();
			initHead();
			initContent();
			render();
		}
	},
	
	initContent : function(){
		with(this){
			contentDive = document.createElement("div");
			contentDive.innerHTML = config.content;
			contentDive.style.height = (PopupContants.height - 25)+'px';
			contentDive.style.width = '100%';
			
			div.appendChild(contentDive);
		}
	},
	
	initHead : function(){
		with(this){
			headDiv = document.createElement("div");
			headDiv.className = 'head bg_img_pigbg3 border_color_common';
			headDiv.style.overflow = 'hidden';
			
			//??ť
			initBtn();
			
			// ????
			titleDiv = document.createElement("div");
			titleDiv.className = 'head-left';
			titleDiv.innerHTML = config.title;
			headDiv.appendChild(titleDiv);
			
			div.appendChild(headDiv);
			
			var self = this;
			div.onmousedown = function(){
				PopupManager.setZindex(self);	
			}
			
			var self = this;
			titleDiv.onmousedown = function(e){
				self.headMouseDownHandler(e);
			};
		}
	},
	
	initBtn : function(){
		var btnDiv = document.createElement("div");
		btnDiv.className = 'head-right';
		btnDiv.style.width = '16px';
		this.headDiv.appendChild(btnDiv);
		
		var closeBtn = document.createElement("div");
		closeBtn.className = 'x-tool x-tool-close txbtip';
		var id = this.config.id;
		closeBtn.onclick = function(){
			PopupManager.removePopup(id);
		}
		btnDiv.appendChild(closeBtn);
	},
	
	resetPopoup : function(config){
		this.config = config;
		with(this){
			titleDiv.innerHTML = config.title;
			contentDive.innerHTML = config.content;
		}
	},
	
	render : function(){
		with(this){
			document.body.appendChild(div);
			div.style.position = 'absolute';
			div.style.right = 0;
			div.style.bottom = -200;
		}
	},
	
	initDiv : function(){
		with(this){
			div = document.createElement("div");
			div.style.border = '1px solid';
			div.style.overflow = 'hidden';
			div.className = 'border_color_common';
			div.style.width = PopupContants.width;
			div.style.height = PopupContants.height;
			div.style.backgroundColor = '#ffffff';
		}
	},
	
	// ??ק ------------------
	
	dragging : false,
	startX : 0,
	startY : 0,
	width : PopupContants.width,
	height : PopupContants.height,
	
	hideMaxk : function(){
		var mask = $('shield');
		if(mask){
			mask.style.display = 'none';
			document.body.style.cursor = "default";
		}
	},
	
	createMask : function(){ 
		var mask = $('shield');
		if(mask){
			mask.style.display = 'block';
		}else{
			//???????? 
			var rootEl=document.documentElement||document.body; 
			var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px"; 
			var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px"; 
			var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0"; 
			var shield = document.createElement("<div id='shield' style=\""+shieldStyle+"\"></div>");
			document.body.appendChild(shield);
			document.body.style.cursor = "move";
		}
	},
	
	headMouseDownHandler : function(e){
		with(this){
			if(dragging){
				return false;
			}
			createMask();
			dragging  = true;
			e = e || event;
			startX = e.offsetX;
			startY = e.offsetY;
			var self = this;
			document.onmouseup = function(e){
				self.docMouseUp(e);
			};
			document.onmousemove = function(e){
				self.docMouseMove(e);
			};
		}
	},
	
	docMouseMove : function(e){
		with(this){
			e = e || event;
			if (dragging) {
				var l = (e.x - startX);
				var r = (e.y - startY);
				if(l<0){
					l = 0;
				}else if(l+width > document.body.offsetWidth){
					l = document.body.offsetWidth - width;
				}
				
				if(r < 0){
					r = 0;
				}else if(r+height > document.body.offsetHeight){
					r = document.body.offsetHeight - height;
				}
				div.style.left = l + "px";
				div.style.top = r + "px";
			}
		}
	},
	
	removeBodyMouseEvent : function(){
		document.onmouseup = null;
		document.onmousemove = null;
	},
	
	docMouseUp : function(){
		with(this){
			removeBodyMouseEvent();
			dragging = false;
			hideMaxk();
		}
	}
};
PopupManager = {
	popups : {},
	seq : 0,
	
	I18N : {
	
	},
	
	setZindex : function(p){
		var maxZindex = 10;
		for(pName in this.popups){
			var op = this.popups[pName];
			if(op.div.style.zIndex && op.div.style.zIndex >= maxZindex){
				maxZindex = op.div.style.zIndex + 1;
			}
		}
		p.div.style.zIndex = maxZindex;
	},
	
	encodeContent : function(msgs){
		var str = '<table style="cursor:default;width:100%;" cellspacing="0" cellpadding="0">';
		for(i=0;i<msgs.length;i++){
			var m = msgs[i];
			
			var cw = 330;
			
			str += '<tr>';
				str += '<td vAlign="middle" colSpan="2" style="width:90px;height:15px;" title="'+m.title+'"><div class="nowrapText" style="width:90px;padding:3px;"><b>'+m.title+'</b></div></td>';
			str += '</tr>';
			str += '<tr>';
				str += '<td style="width:'+cw+'px;padding-left:10px;" title="'+m.content+'"><div style="padding:3px;color:#1960ef;width:'+cw+'px;text-overflow:ellipsis;word-break: break-all;">'+m.content+'</div></td>';
				if(m.onclick){
					str += '<td vAlign="middle" align="center" style="width:50px;height:16px;"><a href=# onclick="'+m.onclick+'"><img src="/images/common/preview.png" style="vertical-align:middle;"/>'+PopupManager.I18N.look+'</a></td>';
				}
			str += '</tr>'
		}
		str += '</table>';
		return str;
	},
	
	show : function(id,msgs){
		var popup = null;
		if(id == null){
			id = this.nextId();
		}else{
			popup = this.getPopup(id);
		}
		var conf = {
			id : id,
			title : PopupManager.I18N.title,
			content : this.encodeContent(msgs)
		};
		
		if(popup == null){
			popup = new Popup(conf);
			this.popups[id] = popup;
			this.move(popup.div,0);
		}else{
			popup.resetPopoup(conf);
		}
		
	},
	
	removePopup : function(id){
		try{
			var p = this.popups[id];
			if(p){
				delete this.popups[id];
				document.body.removeChild(p.div);				
			}
		}catch(e){}
	},
	
	getPopup : function(id){
		var p = this.popups[id];
		return p ? p : null;
	},
	
	nextId : function(){
		this.seq++;
		return 'popup_'+this.seq;
	},
	
	parseLeftPx : function(str){
   		str = str.substring(0,str.length-2);
   		return parseInt(str);
   	},
	
	move : function(div, bottom, speed) {
		if (!div.effect) {
			div.effect = {};
			div.effect.move = 0;
		}
		clearInterval(div.effect.move);
		var speed = speed || 10;
		var unit = 2;
		var currBottom = this.parseLeftPx(div.style.bottom);
		div.effect.move = setInterval(function() {
			currBottom = currBottom + speed;
			if(currBottom > bottom){
				currBottom = bottom;
				clearInterval(div.effect.move);
			}
			div.style.bottom = currBottom + 'px';
		}, 20);
	}
};